Просмотр полной версии : вопрос по верстке (IE)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style type="text/css">
body {
margin:0px;
padding:0px;
text-align: center
}
#site {
position:relative;
width:800px;
height:700px;
margin: 50px auto 0px auto ;
background-color:gray;
}
ul,
li {
float:left;
list-style:none;
margin:0; padding:0;
}
li {
width:178px;
height:50px;
padding:2px 10px;
font:Bold Small Tahoma;
background:#35C; color:white;
border:solid 1px; border-color:#46F #238 #238 #46F;
}
a {
color:white; text-decoration:none;
}
#content {
position:absolute;
top:100px;
left:100px;
width:600px;
height:500px;
background-color:silver;
}
</style>
</head>
<body>
<div id="site">
<ul>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
</ul>
<div id="content"></div>
</div>
</body>
</html>
почему в IE не отображается div с id = content (если ul убираю, то появляется)
В каком IE? у меня в IE 8 всё нормально
В ИЕ7 также всё показывается...
в IE7 показывает (в IEtester Смотрел),
в IE8 наверно тоже покажет,
в IE6 чё-то не показывает
p.s.
жаль, что эту тему с IE прикрыли(((
http://spoon.net/browsers/
жаль, что эту тему с IE прикрыли(((
http://spoon.net/browsers/
Точно, там ие как раз и нужен больше всего)
mycoding
30.12.2010, 14:26
А что это за сайт? http://spoon.net/browsers/
В ie6 глюк есть, он центральный элемент не отображает.
Оффтопик: Никто не знает платных онлайн курсов по профессиональной
верстке, вроде как Илья Кантор делает по javascript.
А что это за сайт? http://spoon.net/browsers/
В ie6 глюк есть, он центральный элемент не отображает.
Оффтопик: Никто не знает платных онлайн курсов по профессиональной
верстке, вроде как Илья Кантор делает по javascript.
очень интереснол, центральный это как?
поясни плиз
А что это за сайт? http://spoon.net/browsers/
ну, сайт просто полезный, для тестирования в разных браузерах
очень интереснол, центральный это как?
поясни плиз
Ну он наверное имел в виду div с id="content"
Ну он наверное имел в виду div с id="content"
это понятно, поподробнее бы
monolithed
30.12.2010, 21:45
Оффтопик: Никто не знает платных онлайн курсов по профессиональной
а что там учить-то? если что-то конкретное интересует, могу так помочь (в разумных пределах конечно)
monolithed
30.12.2010, 22:12
почему в IE не отображается div с id = content (если ul убираю, то появляется)
видимо потому, что безграмотная верстка (без обид, но ошибки совсем детские):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="ru">
<head>
<style type="text/css">
#wrap, #content, ul, ul li {
overflow: hidden;
position: relative;
}
#wrap {
background: gray;
width: 208px;
height: auto;
}
#content {
background: red;
margin: 20px auto;
width: 100px;
height: 50px;
}
ul, ul li {
margin: 0px;
padding: 0px;
}
ul {
width: 208px;
height: 20px;
}
ul li {
background: #35C;
border: solid 1px;
border-color: #46F #238 #238 #46F;
display: block;
list-style: none;
text-align: center;
float: left;
width: 50px;
}
ul li a {
color: #fff;
font: 300 14px/14px arial, tahoma, verdana, sans-serif;
text-decoration: none;
}
</style>
</head>
<body>
<div id="wrap">
<ul>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
</ul>
<div id="content"></div>
</div>
</body>
</html>
видимо потому, что безграмотная верстка (без обид, но ошибки совсем детские):
я верстать не умею, только шаблоны иногда правлю
mycoding
30.12.2010, 22:33
http://javascript.ru/files/u5029/1234.png
Илья Кантор
01.01.2011, 17:30
Делайте, пожалуйста, нормальные названия у тем.
Делайте, пожалуйста, нормальные названия у тем.
ок
mycoding
03.01.2011, 10:14
а что там учить-то? если что-то конкретное интересует, могу так помочь (в разумных пределах конечно)
Интересуют красивые, приятные шрифты для контента сайта.
Ещё я никак не могу научиться блочной верстке.
Хотя мне уже столько ссылок дали.
Интересует как из макета-фото сделать верстку страницы.
как из макета-фото сделать верстку страницы.
Представить картинку как некий набор прямоугольных областей... Порезать картинку на "составляющие"... Собрать все воедино.
mycoding
03.01.2011, 12:41
Представить картинку как некий набор прямоугольных областей... Порезать картинку на "составляющие"... Собрать все воедино.
А с помощью чего это можно сделать?
Какая программа?
Мне бы очень хотелось ещё научится делать дизайны.
Вроде таких
http://www.qiwi.ru/image/happy_new_year2011_left_s.png
http://www.qiwi.ru/image/happy_new_year2011_right_s.png
Взято с qiwi http://www.qiwi.ru/
А с помощью чего это можно сделать?
Какая программа?
photoshop, а собирать в ide или текстовом редакторе
Мне бы очень хотелось ещё научится делать дизайны.
Вроде таких
в чем проблема?
monolithed
03.01.2011, 14:03
Для того чтобы научиться правильно верстать нужно запомнить несколько простых правил:
1. выбрать тип документа и следовать его спецификации.
2. определится с основыным типом верстки (это не значит что запрещено использовать таблицы, там где их использование целесообразно).
Если каркас сайта имеет фиксированную ширину,то целесообразно использовать блочную версту, если же планируется масштабирование, то - смешанную.
3. Минимальное количество запосов к серверу:
CSS должны быть вынесены в отдельные файлы и объеденены в один, причем неиспользуемые стили желательно подключать только на тех страницах где они будут задействованы.
Стили для IE выносятся в отдельный файл и подключаются через условные комментарии.
Примечание: если важны корректные пути при сохранении страницы, то используйте тег BASE
4. Графика.
Максимльное использование спрайтов. Все изображения нужно делить по группам.
Если есть изображения которые повторяются на большинстве страниц, то есть смысл объеденить их в один файл, это позволит нам сократить количество запросов к серверу, а сами изображения закешировать.
Важно: К примеру если у вас уголки для каркаса используются на всех страницах, то не нужно к ним добавлять изображения, которые размещены на редкопосещаемых страницах.
Также стоит отметить какое расширение стоит выбрать:
Если есть возможность убрать у изображения лишний фон, то делайте это (для форматов поддерживающих прозрачность).
- для маленьких пикторгамм используйте GIF.
- для средних изображений используйте PNG-8
- для изображений больших размеров JPG.
- для изображений где нужен альфа-канал - PNG-24.
Во всех форматах кроме PNG-24 можно выбирать еще качество, но будьте осторожны.
PNG-24 - использовать только там где он действительно необходим, т.е. где нужна 256 палитра цветов и альфа-канал (причем если есть возмность заменить его фоном - заменяйте), во всех других случаях лучше спользовать фарматы с индексированной палитрой цветов.
Для работы с этим форматом рекомендую прочитать:
http://www.artzstudio.com/2008/07/png-alpha-transparency-no-clear-winner/
http://www.artlebedev.ru/tools/technogrette/img/png-4/
Инструменты:
- текстовый редактор (я использую Notepad++);
- графический редактор (я использую Photoshop CS5);
- firebug;
- PNGout (если используете редакторы не поддерживаюшие редактирование метаданных);
- голова и руки;
IE6:
- CSS выносится в отдедельные файлы и подключатся только для требуемых версий.
- PNG-24 либо альфаканал заливается фоном, либо используем небольшой скрипт:
<script type="text/javascript">
function fixPNG(element) {
if(/MSIE (5\.5|6).+Win/.test(navigator.userAgent)) {
var src;
if(element.tagName=='IMG') {
if(/\.png$/.test(element.src)) {
src = element.src;
element.src = '/blank.gif'; //однопиксельная GIF-картинка
}
}
else {
src = element.currentStyle.backgroundImage.match(/url\("(.+\.png)"\)/i)
if(src) {
src = src[1];
element.runtimeStyle.backgroundImage="none";
}
}
if(src) {
element.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader (src='" + src + "',sizingMethod='scale')";
}
}
}
</script>
<style type="text/css">
img {
filter: expression(fixPNG(this));
position: relarive;
}
</style>
- правильная верстка в IE6 отдельная темя для разговора, хоть и делов на пять минут
Какая программа?
Да хоть тот же Paint.NET, он бесплатен...
Т.к. х/з как у тебя с деньгами и освоением сложного ПО...
monolithed
03.01.2011, 17:35
Paint.NET
это конечно лучше чем по дефолту, но с фотошопом рядом не стоял
как у тебя с деньгами
типа обязательно покупать?)))
и освоением сложного ПО...
это же не Mathcad))
итого, monolithed, ты написал про оптимизацию, а не про верстку, как просил mycoding (мне так кажется, по-крайней мере)
monolithed, а что у тебя там за стили такие для ie, которые в отдельный файл надо выносить?
monolithed
03.01.2011, 18:39
ты написал про оптимизацию
Есть такое, это я вообще ему в ЛС писал, а потом решил, что путь другие почитают, может будет толк и другим...
На самом деле, на понимание всех особенностей верстки уходят годы, поэтому тут опыт нужен. А в остальном разбирать нужно на хорошем примере и набивать руку...
а не про верстку
в ЛС выслал остальной материал...
а что у тебя там за стили такие для ie, которые в отдельный файл надо выносить?
Ну как :), что-то типо такого
<!--[if lt IE 8]>
<style type="text/css" media="all">
@import url('files/msie.css');
</style>
<![endif]-->
Ну как , что-то типо такого
я про содержимое msie.css. У меня как-то без хаков получается делать
с фотошопом рядом не стоял
Таки я их рядом и не ставлю... :D
monolithed
03.01.2011, 21:05
я про содержимое msie.css
как правило не больше 5-10 строк.
У меня как-то без хаков получается делать
для IE7 и выше безусловно, но для IE6 в это сложно поверить особенно на больших проектах.
для IE7 и выше безусловно, но для IE6 в это сложно поверить особенно на больших проектах.
по-крайней мере мне ничего такого не вспоминается. Можешь приведи какой-нибудь реальный пример, который нельзя сделать без хаков?
monolithed
04.01.2011, 21:07
по-крайней мере мне ничего такого не вспоминается. Можешь приведи какой-нибудь реальный пример, который нельзя сделать без хаков?
я не являюсь сторонником применения хаков (но без них даже сами мелокомягкие (http://store.microsoft.com/microsoft/Windows-7-Home-Premium-Upgrade/product/B0F9E641?WT.mc_id=MSCOM_S_US_SM_Windows_HomePremUp grade) не справляются, причем они уже давно отказались от поддержки IE6).
Сходу пример привести не могу, но по памяти могу сказать, что бывают различия в размерах элеметов, отступов (особенно в формах это наблюдается). Есть также нюансы с позиционироаванием, использованием а в качестве едениц измерения процентов, с таблицами есть косяки.
Если интересны баги,то основные описаны тут: http://www.gtalbot.org/BrowserBugsSection/MSIE6Bugs/
я не являюсь сторонником применения хаков (но без них даже сами мелокомягкие).
а к чему эта ссылка?
Сходу пример привести не могу, но по памяти могу сказать, что бывают различия в размерах элеметов, отступов (особенно в формах это наблюдается). Есть также нюансы с позиционироаванием, использованием а в качестве едениц измерения процентов, с таблицами есть косяки.
все это есть, просто мне как-то не приходилось их использовать. Это, в общем-то, не аргумент. Просто интересно, когда без этого не обойтись. Не, ну я представляю себе пару вариантов, типа "валидатор - истина в последней инстанции" или "я сделаю это списком, no matter what it takes" или "websites need to look exactly the same in every browser (http://dowebsitesneedtolookexactlythesameineverybrowser.c om/)" или "блочная верстка - наше все" или, в случае верстки, при написании какого-нибудь css-фреймворка. Но, как по мне, это все надуманные цели
monolithed
04.01.2011, 22:31
а к чему эта ссылка?
она ведет на сайт мелокомягких, где можно заглянуть в код и увидеть, что они сами же используют хаки.
она ведет на сайт мелокомягких, где можно заглянуть в код и увидеть, что они сами же используют хаки.
это не аргумент
Написать серьёзный проект не уделяя особого внимания ie6 - это фантастика. В нем слишком много документированных (http://haslayout.net/css/index) багов. Какой бы чудесный и правильный код бы вы не писали.
Нет, наверное можно в каждом конкретном случае вместо простых решений заворачивать html и css конструкции на десятки кб - чтобы и в ие и в браузерах всё работало одинаково, но на деле удобнее для браузеров сделать простой и правильный вариант, а для ослика хак.
я не говорил про "не уделяя особого внимания ie6". В первую очередь мне непонятно, зачем выносить стили для ie в отдельный файл. Я предположил, что иначе прийдется использовать хаки. Я не помню, чтобы мне это когда-либо пригодилось (наверное, все дело в том, что я не участвовал в серьезных проектах), поэтому мне и интересно, что такое должен хотеть дизайнер, чтобы понадобились хаки. Кроме того, абстрактно на эту тему можно долго спорить и все будут правы, поэтому я предложил привести реальные примеры...
по поводу серьезных проектов... microsoft.com - серьезный проект? Они забили на ie6 ;)
Нет, наверное можно в каждом конкретном случае вместо простых решений заворачивать html и css конструкции на десятки кб - чтобы и в ие и в браузерах всё работало одинаково, но на деле удобнее для браузеров сделать простой и правильный вариант, а для ослика хак.
вот именно поэтому я и говорил про реальные примеры. Да, я могу ответить, что вместо того, чтобы писать код-который-хрен-кто-поймет, лучше в каждом конкретном случае применить простое решение проблемы. Но без примеров можно спорить очень долго. Как, однажды, сказал один персонаж, "оба правы, но спорить будут долго..."
monolithed
05.01.2011, 11:26
x-yuri
На самом деле, без хаков можно обойтись если выносить стили для IE в отдельные файлы (я выбрал этот подход), если конечно не считать это тоже хаком...
На самом деле, без хаков можно обойтись если выносить стили для IE в отдельные файлы (я выбрал этот подход), если конечно не считать это тоже хаком...
;)
а подход, да, лучше, если использовать его, чтобы фиксить старые версии, т.е. if lt/lte IE n
видимо потому, что безграмотная верстка
<style type="text/css">
#wrap, #content, ul, ul li {
overflow: hidden;
position: relative;
}
#wrap {
background: gray;
width: 208px;
height: auto;
}
#content {
background: red;
margin: 20px auto;
width: 100px;
height: 50px;
}
ul, ul li {
margin: 0px;
padding: 0px;
}
ul {
width: 208px;
height: 20px;
}
ul li {
background: #35C;
border: solid 1px;
border-color: #46F #238 #238 #46F;
display: block;
list-style: none;
text-align: center;
float: left;
width: 50px;
}
ul li a {
color: #fff;
font: 300 14px/14px arial, tahoma, verdana, sans-serif;
text-decoration: none;
}
</style>
вот здесь вопрос возник:
есть такие статейки по верстке (хорошие):
http://softwaremaniacs.org/blog/2005/12/01/css-layout-float/
там есть цитата:
блоки, идущие за float'ами перестают эти float'ы замечать и подтягиваются вверх. Более того, сам контейнер, в котором float'ы находятся, тоже перестает их замечать и float'нутые блоки проваливаются через низ контейнера, если он заканичвается раньше.
и решение:
Для устранения подтягивания блоков существует специальное свойство — clear. Оно заставляет элемент сдвигаться вниз, пока сбоку от него не останется float'ов.
Но это не решает другой проблемы: того, что float'ы проваливаются через "main", и тот схлопывается, в результате чего не видно колоночного фона, который ему назначен. Проваливание можно победить двумя способами.
Можно явно спозиционировать контейнер каким-нибудь образом. Насколько я понимаю логику спецификации, поведение проваливания считается логичным только в простом потоке. В других случаях оно только мешает. И так оно и есть, как мы убедились. То есть достаточно назначить контейнеру например position:absolute или float:left и ничего не будет проваливается, контейнер будет полностью заключать в себя и текст, и float'ы. В нашем случае (и в большинстве случаев, кстати) это решение вполне подойдет.
Другой интересный способ связан с побочным эффектом свойства overflow.
Так вот побочный эффект заключается в том, что если контейнеру поставить любой overflow, кроме обычного visible, он вдруг растягивается и заключает в себя float'ы, которые в нем сидят, устраняя проваливание.
так вот,
у нас есть контейнер ul, унего в стилях position:relative и
overflow:hidden,
если я удаляю эти стили ему, то floatнутые блочные li (у которых по умолчанию высота чуть больше высоты ul) "заканчиваются" чуть-чуть ниже ulа(через файрбаг посмотрел, на полосочку маленькую ниже), т.е. "проваливаются через низ контейнера"
если ставим position:relative и overflow:hidden
то, как я понимаю, благодаря поцизионированию ul, решается проблема "проваливания", а overflow уже просто обрубает то, что выходит за пределы контейнера
но если мы ставим просто overflow:hidden без position:relative, то контейнер, по идее, должен растянуться, и заключить в себя floatы,
а вместо этого он обрубает лишнее у floatов
и если мы отдельно ставим position:relative, то тоже самое, по идее мы позиционируем контейнер => "проваливание" должно исчезнуть, но опять получается, что ul чуть чуть уже, чем li.
<telepath-mode>hasLayout что ли?</telepath-mode>
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<div style="
overflow:hidden;
background: green;
zoom: 1;
">
<div style="
width: 50px;
height: 50px;
background: red;
float: left;
"></div>
</div>
</body>
</html>
видимо потому, что безграмотная верстка (без обид, но ошибки совсем детские):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="ru">
<head>
<style type="text/css">
#wrap, #content, ul, ul li {
overflow: hidden;
position: relative;
}
#wrap {
background: gray;
width: 208px;
height: auto;
}
#content {
background: red;
margin: 20px auto;
width: 100px;
height: 50px;
}
ul, ul li {
margin: 0px;
padding: 0px;
}
ul {
width: 208px;
height: 20px;
}
ul li {
background: #35C;
border: solid 1px;
border-color: #46F #238 #238 #46F;
display: block;
list-style: none;
text-align: center;
float: left;
width: 50px;
}
ul li a {
color: #fff;
font: 300 14px/14px arial, tahoma, verdana, sans-serif;
text-decoration: none;
}
</style>
</head>
<body>
<div id="wrap">
<ul>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
</ul>
<div id="content"></div>
</div>
</body>
</html>
я вот этот пример имел ввиду, и его поведение при
#wrap, #content, ul, ul li {
overflow: hidden;
position: relative;
}
и при
#wrap, #content, ul li {
overflow: hidden;
position: relative;
}
и
#wrap, #content, ul li {
overflow: hidden;
position: relative;
}
ul {
overflow:hidden;
}
или
#wrap, #content, ul li {
overflow: hidden;
position: relative;
}
ul {
position:relative;
}
monolithed
09.01.2011, 16:53
x-yuri
А свойство zoom (его кстати Safari 4+ поддерживает) вы разве не относите к хакам (я к счастью его еще ни разу не использовал)?
Shaci , вот тут я теоретически не могу пояснить эти нюансы
Вам нужно то, всего лишь понять поведение position:relative; и overflow: hidden; Откройте firebug, включите опции браузера и поиграйтесь со значениями.
ктати вот, довольно интересный пример с clear:
<style type="text/css">
div {
border: 1px solid;
position: relative; /* в нормальных браузерах не обязательно, но желательно */
overflow: hidden; /* в нормальных браузерах не обязательно, но желательно */
}
</style>
<div>text1</div>
<div style="float: left;">text2</div>
<div style="clear: both">text3</div>
я вот этот пример имел ввиду, и его поведение при
так ты убери оттуда все лишнее и сам поймешь. В конце концов, ты же хочешь чтобы кто-нибудь обратил на твой вопрос внимание? Сделай, чтобы другим было максимально просто разобраться. И тебе полезно будет ;)
x-yuri
А свойство zoom (его кстати Safari 4+ поддерживает) вы разве не относите к хакам (я к счастью его еще ни разу не использовал)?
хм, может действительно надо было конкретизировать. Я в первую очередь имел в виду, когда пытаются эмулировать conditional comments внутри css, всякие * html {}, *:first-child+html {} * html {}. Особенно те из них, которые работают в текущих версиях браузеров. Потому что выйдет новая версия и поведение исправят, а сайт поломается
zoom: 1... я бы это отнес скорее к vendor-specific css properties (-moz-, -o-, -webkit-). И непонятно, зачем такое выносить в отдельный css файл. Я вижу одну причину выноса в отдельный файл - чтобы использовать conditional comments. Вот мне и интересно, когда без них не обойтись...
а вынос в отдельный файл провоцирует на добавление в него правил, без которых можно обойтись. Да и работать с двумя файлами неудобно
ктати вот, довольно интересный пример с clear:
а что там интересного? Уличная магия с position: relative и overflow: hidden, которая там на всякий случай... вдруг поможет в каком-нибудь браузере?
в ЛС выслал остальной материал...
так кинь и сюда, другим тоже интересно :) .
monolithed
11.01.2011, 12:18
так кинь и сюда, другим тоже интересно .
ну я выслал интерфес, который мне нужно было сверстать для прохождение профессионального конкурса, поэтому в паблик не могу выложить, т.к. оно в работе сейчас, кто знает вдруг пойдет по рукам, сами понимаете...
А если что-то конкретное интересует, спрашивайте тут.
а понятно, я думал по верстке что то еще ты писал.
попробовал сделать подменюшку динамическую)), в ie верстка разваливается,
в firefox работает
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="ru">
<head>
<style type="text/css">
#wrap, #content, ul, ul li {
overflow: hidden;
position: relative;
}
#wrap {
margin:0 auto;
background: gray;
width: 408px;
height: auto;
}
#content {
background: #330033;
margin: 40px auto;
width: 300px;
height: 80px;
}
ul, ul li {
margin: 0px;
padding: 0px;
}
ul {
width: 408px;
height: 20px;
}
ul li {
background: #35C;
border: solid 1px;
border-color: #46F #238 #238 #46F;
display: block;
list-style: none;
text-align: center;
float: left;
width: 100px;
}
ul li a {
color: #fff;
font: 300 14px/14px arial, tahoma, verdana, sans-serif;
text-decoration: none;
}
#first, #second, #third, #fourth {
height:20px;
border:solid 0px 1px 0px 1px;
background:#330066;
}
#submenu {
position:absolute;
height:0px;
overflow:visible;
}
</style>
<script type="text/javascript">
window.onload = function() {
//addEvent
function addEvent(elem, type, handler){
if (elem.addEventListener){
elem.addEventListener(type, handler, false)
} else {
elem.attachEvent("on"+type, function () {handler.apply(elem)})
}
}
var childs = document.getElementById("submenu").getElementsByTagName("li");
for (var i = 0; i < childs.length; i++) {
childs[i].style.height = "0px";
}
var animating = false;
var menuLi = document.getElementById("menu").getElementsByTagName("li");
var submenu, str, id;
for (var i = 0; i < menuLi.length; i++) {
var a = menuLi[i].getElementsByTagName("a")[0];
addEvent(a, "click", incDec);
}
function incDecInner() {
if (str == "+") {
if (submenu.style.height != "20px") {
submenu.style.height = parseInt(submenu.style.height) + 2 + "px";
}
else {
animating = false;
clearInterval(id);
}
}
else {
if (submenu.style.height != "0px") {
submenu.style.height = parseInt(submenu.style.height) - 2 + "px";
}
else {
animating = false;
clearInterval(id);
}
}
}
function incDec(event) {
event = event || window.event
if (event.preventDefault) {
event.preventDefault()
} else {
event.returnValue = false
}
if (animating) return;
else {
animating = true;
var array = /#(.+)/.exec(this.href);
var pointer = array[1];
submenu = document.getElementById(pointer);
if (submenu.style.height == "0px") {
str = "+";
id = setInterval(incDecInner,50);
}
else {
str = "-";
id = setInterval(incDecInner, 50);
}
}
}
}
</script>
</head>
<body>
<div id="wrap">
<ul id="menu">
<li><a href="#first">1</a></li>
<li><a href="#second">2</a></li>
<li><a href="#third">3</a></li>
<li><a href="#fourth">4</a></li>
</ul>
<ul id ="submenu">
<li id="first"><a href="#">1</a></li>
<li id="second"><a href="#">2</a></li>
<li id="third"><a href="#">3</a></li>
<li id="fourth"><a href="#">4</a></li>
</ul>
<div id="content"></div>
</div>
</body>
</html>
в ie верстка разваливается
Вижу 2 проблемы...
1. отступ сиреневого блока сверху
2. не верное позиционирование субменю
Как вариант (смотрел в ИЕ7 и Опере)
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#wrap, #content, ul, ul li {
overflow: hidden;
position: relative;
}
#wrap {
margin:0 auto;
background: gray;
width: 408px;
height: auto;
}
#content {
background: #330033;
margin-left: auto;
margin-right: auto;
width: 300px;
height: 80px;
}
ul, ul li {
margin: 0px;
padding: 0px;
}
ul {
width: 408px;
height: 20px;
}
ul li {
background: #35C;
border: solid 1px;
border-color: #46F #238 #238 #46F;
display: block;
list-style: none;
text-align: center;
float: left;
width: 100px;
}
ul li a {
color: #fff;
font: 300 14px/14px arial, tahoma, verdana, sans-serif;
text-decoration: none;
}
#first, #second, #third, #fourth {
height:20px;
border:solid 0px 1px 0px 1px;
background:#330066;
}
#submenu {
position:absolute;
top: 22px;
left: 0;
height:0px;
overflow:visible;
}
#tab {
height: 40px;
}
</style>
<script type="text/javascript">
window.onload = function() {
//addEvent
function addEvent(elem, type, handler){
if (elem.addEventListener){
elem.addEventListener(type, handler, false)
} else {
elem.attachEvent("on"+type, function () {handler.apply(elem)})
}
}
var childs = document.getElementById("submenu").getElementsByTagName("li");
for (var i = 0; i < childs.length; i++) {
childs[i].style.height = "0px";
}
var animating = false;
var menuLi = document.getElementById("menu").getElementsByTagName("li");
var submenu, str, id;
for (var i = 0; i < menuLi.length; i++) {
var a = menuLi[i].getElementsByTagName("a")[0];
addEvent(a, "click", incDec);
}
function incDecInner() {
if (str == "+") {
if (submenu.style.height != "20px") {
submenu.style.height = parseInt(submenu.style.height) + 2 + "px";
}
else {
animating = false;
clearInterval(id);
}
}
else {
if (submenu.style.height != "0px") {
submenu.style.height = parseInt(submenu.style.height) - 2 + "px";
}
else {
animating = false;
clearInterval(id);
}
}
}
function incDec(event) {
event = event || window.event
if (event.preventDefault) {
event.preventDefault()
} else {
event.returnValue = false
}
if (animating) return;
else {
animating = true;
var array = /#(.+)/.exec(this.href);
var pointer = array[1];
submenu = document.getElementById(pointer);
if (submenu.style.height == "0px") {
str = "+";
id = setInterval(incDecInner,50);
}
else {
str = "-";
id = setInterval(incDecInner, 50);
}
}
}
}
</script>
</head>
<body>
<div id="wrap">
<ul id="menu">
<li><a href="#first">1</a></li>
<li><a href="#second">2</a></li>
<li><a href="#third">3</a></li>
<li><a href="#fourth">4</a></li>
</ul>
<ul id ="submenu">
<li id="first"><a href="#">1</a></li>
<li id="second"><a href="#">2</a></li>
<li id="third"><a href="#">3</a></li>
<li id="fourth"><a href="#">4</a></li>
</ul>
<div id='tab'></div>
<div id="content"></div>
</div>
</body>
</html>
x-yuri, :)
Вот буквально на днях был косяк с ишаком (6-8). Если я пишу:
.class {
filter: progid:DXImageTransform.Microsoft.Alpha(opacity = 40);
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=40 )";
opacity: 0.4;
}
ломается синтаксис CSS. Конкретно в IE, при просмотре в отладчике, несколько свойств сливаются в один и не работают. Вынос в отдельный файл решает проблему и всё начинает работать.
monolithed
17.01.2011, 09:36
B~Vladi, да так-то в нем много косяков, просто с ходу не получается вспомнить. К примеру в ie6 border co значением transparent нужно через фильтр (http://javascript.ru/forum/xhtml-html-css/14439-td-border-transparent-so-vsekh-storon.html#post88276)назначать ...
ломается синтаксис CSS
а для чего так вообще использовать filter и -ms-filter вместе, да еще с одинаковыми значениями?
-ms-filter для IE8, filter для 7-6. Для 5-ого там другое, но я не увлекаюсь некрофилией.
ломается синтаксис CSS. Конкретно в IE, при просмотре в отладчике, несколько свойств сливаются в один и не работают.
а почему у меня не сливаются?
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<style type="text/css">
div {
background: red;
width: 50px;
height: 50px;
}
#div1 {
opacity: .75;
filter: alpha(opacity=75);
-ms-filter: alpha(opacity=75);
-khtml-opacity: .75;
-moz-opacity: .75;
}
</style>
<div id="div1"></div>
<div></div>
</body>
</html>
К примеру в ie6 border co значением transparent нужно через фильтр назначать ...
вообще-то мне кажется, что я эту проблему как-то решал, но пока не вспомнил
пишите исчо :)
а почему у меня не сливаются?
Найдите 10 отличий, называется.
Вообще не знал, что такая запись работает.
Кстати, у меня ни один фильтр ни в одном ишаке не работает, если файл открыт локально. У всех так?
monolithed
17.01.2011, 13:01
вообще-то мне кажется, что я эту проблему как-то решал, но пока не вспомнил
ну вариантов всего два: использовать фоновую заливку (color/image) или filter: chroma(color=pink);
Кстати, у меня ни один фильтр ни в одном ишаке не работает, если файл открыт локально. У всех так?
никогда с таким не сталкивался :)
Кстати, у меня ни один фильтр ни в одном ишаке не работает, если файл открыт локально. У всех так?
ie8 нашел там сценарии или элементы ActiveX. Пока я не включил их, оно да, не работало
использовать фоновую заливку (color/image)
это как?
monolithed
17.01.2011, 14:05
это как?
ну как, если нужно сделать:
border 10px solid transparent
если никакой текстуры нет, то можно просто залить в цвет:
border 10px solid white;
если же предусмотрена текстура, то (ту по ситуации нужно смотреть) один из возможных вариантов:
background: url('../image.png') 10px 0px no-repeat;
но бывают случаи, когда нужно именно прозрачный border, то тогда только через фильтр.
ie8 нашел там сценарии или элементы ActiveX.
В IETester тоже самое. Надо будет покопаться в настройках.
но бывают случаи, когда нужно именно прозрачный border, то тогда только через фильтр.
хочется верить. Помню, что у меня такое желание появлялось, но быстро пропадало, за отсутствием необходимости (ну не обязателен был там прозрачный фон)
vBulletin® v3.6.7, Copyright ©2000-2025, Jelsoft Enterprises Ltd. Перевод: zCarot